<!DOCTYPE html>
<body>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>

<div style="width:800px; height:800px">
<textarea id="textInputID">
Some text
</textarea>
</div>

<script>
function drag(startX, startY, destX, destY, callback) {
  chrome.gpuBenchmarking.pointerActionSequence([{source: 'mouse', actions:[
    {name: 'pointerDown', x: startX, y: startY},
    {name: 'pointerMove', x: destX, y: destY},
    {name: 'pointerUp'}]}],
    callback);
}

function testDragAndMove(textArea, nextCallback) {
  var startX = textArea.offsetLeft + 400;
  var startY = textArea.offsetTop + 400;
  drag(startX, startY, startX - 150, startY - 150, t.step_func(() => {
    assert_equals(textArea.style.width, '250px');
    assert_equals(textArea.style.height, '250px');
    nextCallback();
  }));
}

var t = async_test('Test for resizing the TEXTAREA above minimum size set and below its initial size.');
t.step(() => {
  assert_own_property(window, 'chrome');
  assert_own_property(chrome, 'gpuBenchmarking');

  var textArea = document.getElementById('textInputID');
  textArea.style.width = '400px';
  textArea.style.height = '400px';
  textArea.style.minWidth = '200px';
  textArea.style.minHeight = '200px';
  testDragAndMove(textArea, t.step_func(() => {
    textArea.style.width = '400px';
    textArea.style.height = '400px';
    textArea.style.minWidth = '15vw';
    textArea.style.minHeight = '15vh';
    testDragAndMove(textArea, t.step_func(() => {
      textArea.style.width = '400px';
      textArea.style.height = '400px';
      textArea.style.minWidth = '10%';
      textArea.style.minHeight = '10%';
      testDragAndMove(textArea, t.step_func_done());
    }));
  }));
});
</script>
</body>
